<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
    
</h:head>
<h:body>

<ui:composition template="/base.xhtml">
    <ui:define name="base">
    
    <div class="header">
        <a href="index.html" class="logo"></a>

        <div class="buttons">
            <div class="popup" id="subNavControll">
                <div class="label"><span class="icos-list"></span></div>
            </div>
            <div class="dropdown">
                <div class="label"><span class="icos-user2"></span></div>
                <div class="body" style="width: 160px;">
                    <div class="itemLink">
                        <a href="#"><span class="icon-cog icon-white"></span> Settings</a>
                    </div>
                    <div class="itemLink">
                        <a href="#"><span class="icon-comment icon-white"></span> Messages</a>
                    </div>                    
                    <div class="itemLink">
                        <a href="#"><span class="icon-off icon-white"></span> Logoff</a>
                    </div>                                        
                </div>                
            </div>            
            <div class="popup">
                <div class="label"><span class="icos-search1"></span></div>
                <div class="body">
                    <div class="arrow"></div>
                    <div class="row-fluid">
                        <div class="row-form">
                            <div class="span12">                    
                                <div class="input-append input-prepend">
                                    <span class="add-on"><i class="icon-search"></i></span>                                    
                                    <input type="text" name="search" placeholder="Keyword..."/>
                                    <button class="btn" type="button">Search</button>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="popup">
                <div class="label"><span class="icos-cog"></span></div>
                <div class="body">
                    <div class="arrow"></div>
                    <div class="row-fluid">
                        <div class="row-form">
                            <div class="span12">
                                <span class="top">Themes:</span>
                                <div class="themes">
                                    <a href="#" data-theme="" class="tip" title="Default"><h:graphicImage library="img/themes" name="default.jpg"/></a>                                    
                                    <a href="#" data-theme="ssDaB" class="tip" title="DaB"><h:graphicImage library="img/themes" name="dab.jpg"/></a>
                                    <a href="#" data-theme="ssTq" class="tip" title="Tq"><h:graphicImage library="img/themes" name="tq.jpg"/></a>
                                    <a href="#" data-theme="ssGy" class="tip" title="Gy"><h:graphicImage library="img/themes" name="gy.jpg"/></a>
                                    <a href="#" data-theme="ssLight" class="tip" title="Light"><h:graphicImage library="img/themes" name="light.jpg"/></a>
                                    <a href="#" data-theme="ssDark" class="tip" title="Dark"><h:graphicImage library="img/themes" name="dark.jpg"/></a>
                                    <a href="#" data-theme="ssGreen" class="tip" title="Green"><h:graphicImage library="img/themes" name="green.jpg"/></a>
                                    <a href="#" data-theme="ssRed" class="tip" title="Red"><h:graphicImage library="img/themes" name="red.jpg"/></a>
                                </div>
                            </div>
                        </div>
                        <div class="row-form">
                            <div class="span12">
                                <span class="top">Backgrounds:</span>
                                <div class="backgrounds">
                                    <a href="#" data-background="bg_default" class="bg_default"></a>
                                    <a href="#" data-background="bg_mgrid" class="bg_mgrid"></a>
                                    <a href="#" data-background="bg_crosshatch" class="bg_crosshatch"></a>
                                    <a href="#" data-background="bg_hatch" class="bg_hatch"></a>                                    
                                    <a href="#" data-background="bg_light_gray" class="bg_light_gray"></a>
                                    <a href="#" data-background="bg_dark_gray" class="bg_dark_gray"></a>
                                    <a href="#" data-background="bg_texture" class="bg_texture"></a>
                                    <a href="#" data-background="bg_light_orange" class="bg_light_orange"></a>
                                    <a href="#" data-background="bg_yellow_hatch" class="bg_yellow_hatch"></a>                        
                                    <a href="#" data-background="bg_green_hatch" class="bg_green_hatch"></a>                        
                                </div>
                            </div>          
                        </div>
                        <div class="row-form">
                            <div class="span12">
                                <span class="top">Navigation:</span>
                                <input type="radio" name="navigation" id="fixedNav"/> Fixed 
                                <input type="radio" name="navigation" id="collapsedNav"/> Collapsible
                                <input type="radio" name="navigation" id="hiddenNav"/> Hidden
                            </div>                                
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <ui:insert name="content" />
</ui:define>
</ui:composition>

</h:body>
</html>